
<script type="text/javascript">

//temps=[{name:'temp1',screenshot:'/static/image/temp1/screenshot.png',dsp:'this is first template ,sdgs sdg sa gads gdas asd gsda gsda gdsa gdasgdsa gsdg sdg sd gdssd gdasg  ds gds gds gs sd gs dg only sss',pk:'1'},
//		{name:'temp1',screenshot:'/static/image/temp1/screenshot.png',dsp:'this is second ts gds emplate ,onls gds dsg s dgsd sd gas dgdas gs gy sss',pk:'2'}]

	Vue.component('temp-choice',{
		template:'#temp_choice',
		data:function(){
			temps= {{temps| safe}} //,temps,
			if (!studio.temp){
				//Vue.set(studio,'temp',temps[0])
				studio.temp=temps[0].pk
			}
			return {
				studio:studio,
				temps:temps,
			}
		}

	})
</script>

<template id='temp_choice'>
	<div class="row">
        <div v-for='temp in temps' class="temp-cell" @click='studio.temp=temp.pk'>
            <div class="template-box" >
                <div class="website-preview">
                    <img :src="temp.screenshot" class="thu"/>
                </div>
                <div class="describe" :class='{"checked":studio.temp==temp.pk}'>
                    <p v-text='temp.dsp'></p>
                </div>
                <div id='mark' :class='{"checked":studio.temp==temp.pk}'>
                    <img src="/static/image/right.png" alt=""/>
                </div>
            </div>
        </div>


    </div>
</template>

<script>
    //$(function(){
    //    $('.temp-cell').hover(function(){
    //        if($(this).find('.checked').length==0){
    //            $(this).find('.describe').slideToggle(100);
    //        }
    //    }).click(function(){
    //        $(this).find('.checked').show();
    //        $(this).siblings().find('.checked').hide();
    //    })
    //});
    $(function(){
        $('.temp-cell').hover(function(){
            $(this).find('.describe').addClass('expand')
        },function () {
        	$(this).find('.describe').removeClass('expand')
        })
    });

</script>
<style type="text/css">

		.temp-cell{
			display: inline-block;
            width: 320px;
            margin-left: 70px;
		}
        li{
            list-style-type: none;
        }
        .template-box {
            max-height: 268px;
            position: relative;
            margin-bottom: 50px;
            padding: 30px 0;
            overflow: hidden;
            text-align: center;
            background: rgba(0, 146, 242, 0.3);
            border-radius: 5px;
        }
        .template-box .website-preview{
            vertical-align: middle;
        }
        .template-box .describe {
            width: 320px;
            height: 0;
            padding: 0 15px;
            text-align: left;
            position: absolute;
            bottom: 0;
            background: rgba(35, 35, 35, 0.6);
            max-height: 75px;
        }
        .template-box:hover{
            cursor: pointer;
        }

        .template-box .describe p{
            margin: 0;
            font-size: 14px;
            font-weight: 700;
            color: #ffffff;
        }
        .thu{
            width: 240px;
            max-height: 270px;
            vertical-align: middle;
        }

        #mark{
	        position: absolute;
            right: 2px;
            bottom: 2px;
            display: none;
        }
        #mark.checked{
	        display: inline;
        }
        #mark img{
            width: 35px;
        }
        .describe{
        	transition: all .5s ease
        }
        
        /*.describe{*/
	        /*height:0;*/
	        /*padding: 0 15px;*/
        /*}*/
        .describe.checked{
	        padding: 10px 15px;
	        height:auto;
        }
		.describe.expand{
			padding: 10px 15px;
			height:auto;
		}
    </style>